<template>
  <div class="look-drawe-info-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <p>
          设计信息
        </p>
      </el-col>
      <el-form ref="requestParams"
               :model="requestParams"
               :disabled="true"
               label-width="140px">
        <el-col :span="12">
          <el-form-item label="是否采用装配式装修">
            <el-radio-group v-model="requestParams.is_assembly">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否全装修">
            <el-radio-group v-model="requestParams.is_full_trim">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="全装修面积(㎡)">
            <el-input v-model="requestParams.full_trim_area"
                      placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="建筑面积(㎡)"
                        prop="building_area">
            <el-input v-model="requestParams.building_area"
                      placeholder="请输入建筑面积㎡"></el-input>
          </el-form-item>
          <el-form-item label="地上建筑面积(㎡)"
                        prop="ground_building_area">
            <el-input v-model="requestParams.ground_building_area"
                      placeholder="请输入地上建筑面积㎡"></el-input>
          </el-form-item>
          <el-form-item label="地下建筑面积(㎡)"
                        prop="underground_building_area">
            <el-input v-model="requestParams.underground_building_area"
                      placeholder="请输入地下建筑面积㎡"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑层数"
                        prop="building_floors">
            <el-input v-model="requestParams.building_floors"
                      placeholder="请输入建筑层数"></el-input>
          </el-form-item>
          <el-form-item label="地上层数"
                        prop="ground_floors">
            <el-input v-model="requestParams.ground_floors"
                      placeholder="请输入地上层数"></el-input>
          </el-form-item>
          <el-form-item label="地下层数"
                        prop="underground_floors">
            <el-input v-model="requestParams.underground_floors"
                      placeholder="请输入地下层数"></el-input>
          </el-form-item>
          <el-form-item label="结构类型">
            <el-select v-model="requestParams.struct_type"
                       placeholder="">
              <el-option v-for="item in structTypeArr"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="装配率%">
            <el-input v-model="requestParams.assembly_rate"
                      placeholder=""></el-input>
          </el-form-item>
          <!-- @click="downFile" -->
          <el-form-item label="装配率计算书">
            <span class="down-or-look"
                  @click="downOrLookDrawe(requestParams)">{{requestParams.assembly_rate_cal_file_name}}</span>
          </el-form-item>
        </el-col>
      </el-form>
      <LookImgDialog v-if="lookImgDialog==true"
                     :lookImgDialog.sync="lookImgDialog"
                     :imgUrl.sync="imgUrl"></LookImgDialog>
      <!-- 查看PDF格式的文件 -->
      <el-dialog title="pdf格式的文件"
                 :visible.sync="dialogVisiblePdf"
                 width="60%"
                 :modal-append-to-body="false"
                 :append-to-body="true"
                 class="drawe-manage-pdf-style"
                 :before-close="onBeforeClose">
        <DialogVisiblePdf :todosPdf="todosPdf"></DialogVisiblePdf>
      </el-dialog>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <p>
          深化设计图纸
        </p>
      </el-col>
      <el-table :data="tableData.list"
                ref="tableRef"
                :header-cell-style="{background:'#f5f5f5'}">
        <el-table-column width="60"
                         label="序号"
                         align="center"
                         type="index">
        </el-table-column>
        <el-table-column prop="pic_url"
                         label="图纸"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="color:blue;cursor: pointer;"
                  @click="lookImg(scope.row)">{{scope.row.name}}</span>
            <el-image style="width: 0px; height: 0px"
                      :src="scope.row.pic_url"
                      :preview-src-list="picArr"
                      ref="previewImg">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="company_name"
                         label="所属单位"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status"
                         label="是否已确认"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="{'color':scope.row.status == '1' ?'green':'red'}"> {{scope.row.status == '1' ? '已确认' :'未确认'}} </span>
          </template>
        </el-table-column>
        <el-table-column prop="reply_comments"
                         label="回复意见"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="requestParams.page"
                     :page-size="requestParams.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableData.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import DialogVisiblePdf from '../../DraweManagement/components/DialogVisiblePdf';
import LookImgDialog from '../../DeepDesignConfirm/component/LookImgDialog'
import { standardCodeApi } from '@/services/StandardCode';
import { projectDecomApi, ProjectListApi, ProDesignDecomApi } from '@/services/ProjectCenter';
export default {
  components: {
    LookImgDialog,
    DialogVisiblePdf
  },
  props: {
    resolveWbsObj: {
      type: Object,
      default: () => {
        return {}
      }
    },

  },
  data () {
    return {
      picArr: [],
      tableData: {
        list: [],
        total: 0
      },
      todosPdf: '',
      dialogVisiblePdf: false,
      imgUrl: '',
      lookImgDialog: false,
      structTypeArr: [],
      requestParams: {
        ground_building_area: '',
        building_area: '',
        underground_building_area: '',
        building_floors: '',
        ground_floors: '',
        underground_floors: '',
        resolve_wbs_design_id: '',
        resolve_wbs_id: '',
        is_assembly: '',
        is_full_trim: '',
        assembly_rate: '',
        struct_type: '',
        full_trim_area: '',
        assembly_rate_cal_file_name: '',
        assembly_rate_cal_file: '',
        page: 1,
        page_size: 10
      },
    }
  },
  methods: {
    onBeforeClose (done) {
      this.todosPdf = '';//重置
      done()
    },
    downOrLookDrawe (row) {//下载或查看当前文件
      let picUrl = row.assembly_rate_cal_file;//当前点击的文件
      var index = picUrl.lastIndexOf('.') // 获取指定字符串最后一次出现的位置，返回index
      var str = picUrl.substr(index + 1) // substr(start, length) 抽取从start下标开始的length个字符，返回新的字符串
      let judgeIsImg = ['png', 'jpg', 'jpeg'].indexOf(str.toLowerCase()) !== -1;
      let judgeIsPdf = ['pdf'].indexOf(str.toLowerCase()) !== -1;//判断是否为pdf文件
      if (judgeIsImg == true && judgeIsPdf == false) {//图片
        this.imgUrl = picUrl;
        this.lookImgDialog = true;
      } else if (judgeIsPdf == true && judgeIsImg == false) {//非图片直接下载
        this.todosPdf = row.assembly_rate_cal_file;
        this.dialogVisiblePdf = true;
      } else {//非图片类型且非pdf类型执行下载
        this.downFile(picUrl, row.assembly_rate_cal_file_name);
      }
    },
    downFile (url, fileName) {//下载文件
      this.$message.warning('正在下载!')
      console.log('fileName=', fileName, fileName.replace(/\s*/g, ""))
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName.replace(/\s*/g, ""); // 自定义文件名
      link.click() // 下载文件
    },
    getStructCodeCommon () {//结构类型标准码
      let constructTypeMap = window.localStorage.getItem('constructTypeMap');
      if (constructTypeMap) {
        this.structTypeArr = JSON.parse(constructTypeMap);
      } else {
        this.getStandardCode();//标准码
      }
    },
    // 结构类型初始化标准码
    getStandardCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'construct_type'
        }
      }).then(res => {
        if (res.data) {
          this.structTypeArr = res.data.list;
          window.localStorage.setItem('constructTypeMap', JSON.stringify(this.structTypeArr))
        }
      },
        err => {
          console.log(err);
        }
      );
    },
    // downFile () {//下载文件
    //   let fineName = this.requestParams.assembly_rate_cal_file_name;
    //   let url = this.requestParams.assembly_rate_cal_file;
    //   this.$message.warning('正在下载!')
    //   const link = document.createElement('a');
    //   link.href = url;
    //   link.download = fineName.replace(/\s*/g, ""); // 自定义文件名
    //   link.click() // 下载文件
    // },
    getDesignInfo (data) {//设计信息
      ProDesignDecomApi.getDesignInfo({
        params: {
          project_id: this.resolveWbsObj.project_id,
          // resolve_wbs_id: '155',
          resolve_wbs_id: data.resolve_wbs_id,//楼层的主键值
          is_page: 1,
          page: this.requestParams.page,
          page_size: this.requestParams.page_size
        }
      }).then((res) => {
        let resolveWbsId = res.data.resolve_wbs_id
        if (resolveWbsId) {
          let is_assembly = Number(res.data.is_assembly);
          let is_full_trim = Number(res.data.is_full_trim);
          this.requestParams = res.data;
          this.requestParams.is_assembly = is_assembly;
          this.requestParams.is_full_trim = is_full_trim;
        } else {
          this.requestParams = this.$options.data().requestParams;//重置
        };
        this.tableData.list = res.data.list //图纸信息表格
        this.tableData.total = res.data.total_count
        // console.log('1111requestParams=', this.requestParams)
      }).catch((error) => {
        console.log(error)
      })
    },
    //预览图片
    lookImg (row) {
      this.picArr = []
      this.picArr.push(row.pic_url)
      this.$refs.previewImg.showViewer = true
    },
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.getDesignInfo()
    },
  },
  watch: {
    '$store.state.editDesignInfoCount': function (n, o) {
      if (this.resolveWbsObj.resolve_wbs_id || this.resolveWbsObj.project_id) {
        this.getDesignInfo(this.resolveWbsObj);//详情接口更新
      }
      console.log('w $store.state.editDesignInfoCount=', n, o)
    },
    resolveWbsObj (n, o) {
      this.getStructCodeCommon();//结构类型标准码-通用
      if (n.resolve_wbs_id || n.project_id) {
        this.getDesignInfo(n);
      } else {
        this.requestParams = this.$options.data().requestParams;//重置
      }
      console.log('w=resolveWbsObj=', n)
    }
  },
  async created () {
    await this.getStructCodeCommon();//结构类型标准码-通用
    if (this.resolveWbsObj.resolve_wbs_id || this.resolveWbsObj.project_id) {
      await this.getDesignInfo(this.resolveWbsObj);
    } else {
      this.requestParams = this.$options.data().requestParams;//重置
    }
    console.log('c- resolveWbsObj=', this.resolveWbsObj)

  }
}
</script>

<style lang="scss" scoped>
.look-drawe-info-container {
  padding-left: 20px;
  p {
    height: 40px;
    line-height: 40px;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-style: normal;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .el-select {
    width: 100%;
  }
}
</style>